<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/login.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("/image/login.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>

    <script src="/js/code.js"></script>


    <script>
        $(function () {
            $("#open").click(function () {
                if ($("#password").attr("type") == "password") {
                    $("#password").attr("type", "text");
                    $("#open").removeClass("glyphicon glyphicon-eye-open");
                    $("#open").addClass("glyphicon glyphicon-eye-close");
                } else {
                    $("#password").attr("type", "password");
                    $("#open").removeClass("glyphicon glyphicon-eye-close");
                    $("#open").addClass("glyphicon glyphicon-eye-open");
                }
            })
        })
    </script>
</head>
<body>
<div class="container">
    <form action="login_in" method="post" class="form-horizontal" role="form">
        <div class="panel panel-info">
            <div class="panel-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">
                            账号密码登录
                        </a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">手机动态登录</a></li>

                </ul>
                <div id="myTabContent" class="tab-content">
                    <br>
                    <div class="tab-pane fade in active" id="home">
                        <div class="lab"><label for="username"><i title="用户名" class="glyphicon glyphicon-user"></i><input
                                type="text" placeholder="用户名" class="text" id="username" name="username"></label></div>

                        <div class="lab"><label for="password"><i title="密码" class="glyphicon glyphicon-lock"></i><input
                                type="text" placeholder="密码" class="text" id="password" name="password"><a id="open"
                                                                                                           class="glyphicon glyphicon-eye-open"></a></label>
                        </div>
                        <div><input id="cb" type="checkbox">自动登录</div>
                        <br><button type="submit" class="btn btn-primary">登录</button>
                        <div></div>
                        <br>
                        <div id="forgetPass"><a href="reset.html">忘记密码？</a></div>
                    </div>
                    <div class="tab-pane fade" id="ios">
                        <div class="lab"><label for=""><i title="手机号" class="glyphicon glyphicon-phone"></i><input
                                type="text" placeholder="手机号" class="text"></label></div>
                        <div id="phone"><label for=""><i title="动态码" class="glyphicon glyphicon-check"></i><input
                                type="text" placeholder="动态码" id="send"></label></div>
                        <a id="btn" onclick="sendMessage()">发送验证码</a>
                        <br>
                        <div><input type="button" id="login" class="btn btn-primary" value="登录"></div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>